
import { formatDate } from '@/utils/index';
import { useEffect } from 'react';
import { EyeOutlined, ShareAltOutlined } from '@ant-design/icons';
import { KnowledgeModelState, useDispatch, useSelector, history, Link } from 'umi';
import styles from './index.less'
import { Empty, Divider } from 'antd';

export default function Rightother() {
    const { knowledgs } = useSelector((state: { knowledge: KnowledgeModelState }) => state.knowledge);

    const dispatch = useDispatch();

    useEffect(() => {
        dispatch({
            type: 'knowledge/getKnowLedgeList',
        });
    }, [location.pathname]);
    return (
        <div className={styles.rights}>
            <div className={styles.tou}>其他知识笔记</div>
            <div className={styles.rights_crops}>
                <div className={styles.Deilte_Content}>
                    {knowledgs && knowledgs.length > 0 ? (
                        knowledgs.map((item,index) => {
                            return (
                              index < 4 ?  <Link key={item.id} to = {`/knowledge/${item.id}`}>
                                    <div className={styles.crops_tou}>
                                        <div className={styles.Right_Header_ISP}>
                                            {item.title}
                                        </div>
                                        <span className={styles.Content_span}>|</span>
                                        <div className={styles.Right_Header_Time}> {formatDate(item.updateAt)}</div>
                                    </div>
                                    <div className={styles.crops}>
                                        <div className={styles.Right_main_Right}>
                                            <img src={item.cover} alt="" />
                                        </div>
                                        <div className={styles.Right_main_Left}>
                                            <div className={styles.Right_main_Left_Top}>
                                                {item.summary}
                                            </div>
                                            <div className={styles.Right_main_Left_Bto}>
                                                <span>
                                                    <EyeOutlined /> {item.likes}
                                                </span>
                                                <span className={styles.Right_main_Left_Bto_span}>·</span>
                                                <span>
                                                    <ShareAltOutlined />
                                                    {item.views}
                                                </span>
                                            </div>
                                        </div>

                                    </div>
                                    <Divider className={styles.Divider} />
                                </Link>: null
                            ) ;
                        })
                    ) : (
                        <div>
                            <Empty />
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}
